<template>
    <div class="index-banner"  @mouseenter="mouseEnter" @mouseleave="mouseLeave">
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide>
                <div class="banner-ul-li zoom-out" data-index="0" style="background-image:url(https://cdn.uino.cn/uino/banner/index/banner-1.png)">
                    <div class="uino-banner-1">
                        <div class="banner-text-1">数字孪生可视化</div>
                        <div id="banner-text-wrap">
                            <div class="banner-text-2">看懂新空间</div>
                            <div class="banner-text-3">
                                <span>See </span>
                                <span>New </span>
                                <span>Space</span>
                            </div>
                        </div>
                        <div class="banner-btns">
                            <a class="btn-1" target="_blank">
                                预约产品演示
                            </a>
                            <a class="btn-2" target="_blank" >
                                咨询客服
                            </a>
                        </div>
                        <div class="role shake-vertical">
                            <img alt="" src="https://img.uinosoft.cn/img/index/img/banner-role.png">
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="banner-ul-li zoom-out"
                    data-index="1"
                    style="background-image:url(https://cdn.uino.cn/uino/banner/index/banner-22.png)">
                    <div class="banner2-href href-banner">
                        <a ></a>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="banner-ul-li zoom-out"
                    data-index="2"
                    style="background-image:url(https://cdn.uino.cn/uino/banner/index/banner-new-3.png)">
                    <div class="banner2-href third-banner">
                        <div class="uino-banner-2">
                            <div class="header-title">零代码数字孪生开发平台 ThingJS-X</div>
                            <p class="header-subtitle first-subtitle">
                                新客注册即享14天0元试用
                            </p>
                            <p class="header-subtitle">
                                提前享受数字孪生可视化体验
                            </p>
                            <div class="banner-btns header-btns">
                                <a>
                                    <div class="btn-1">免费试用</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="banner-ul-li zoom-out"
                    data-index="3"
                    style="background-image:url(https://cdn.uino.cn/uino/banner/index/banner-21.png)">
                    <div class="banner2-href">
                        <div class="uino-banner-2">
                            <p class="header-title">森工厂 ThingStudio</p>
                            <p class="header-subtitle">一站搞定真孪生</p>
                            <div class="banner-btns header-btns">
                                <a>
                                    <div class="btn-1">
                                        限时免费试用
                                        <span class="btn-1-beta">(Beta版)</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
    // 引入插件
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";

    export default {
        components: {
            swiper,
            swiperSlide
        },
        data() {
            let self = this;
            return {
                currentIndex: 0,
                swiperOption: {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    // 显示分页
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true //允许分页点击跳转
                    },
                    // 设置点击箭头
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    on: {
                        //获取下标，更改底部进度条的值
                        slideChangeTransitionStart: function () {
                            self.toParent();
                            self.currentIndex = this.activeIndex;
                        }
                    },
                }
            };
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        mounted() {
            // current swiper instance
            // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            console.log("this is current swiper instance object", this.swiper);
            // this.swiper.slideTo(3, 1000, false);
        },
        methods: {

            //鼠标移入停止播放
            mouseEnter() {
                this.$refs.mySwiper.swiper.autoplay.stop();
            },
            //鼠标移出恢复播放
            mouseLeave() {
                this.$refs.mySwiper.swiper.autoplay.start();
            },
            //通知给首页更改导航栏字体颜色
            toParent() {
                console.log(this.currentIndex)
                let color = this.currentIndex == 1 ? '#fff' : '#494e5a';
                console.log(213123,color)
                this.$emit('colorTiming', color);
            },
        }
    };
</script>
<style>
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        background-image: url("../../assets/image/arrow_l.png") !important;
        left: 10vw;
    }

    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        background-image: url("../../assets/image/arrow_r.png") !important;
        right: 10vw;
    }

</style>
<style scoped >
    .index-banner .swiper-container{
        position: relative;
        width: 100%;
        height: 716px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .index-banner .swiper-container .swiper-slide{
        width: 100%;
        line-height: 200px;
        color: #000;
        font-size: 16px;
        text-align: center;
    }
    .banner-ul-li{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .swiper-button-next,.swiper-button-prev{
        display: none;

    }
    .index-banner:hover .swiper-button-next,.index-banner:hover .swiper-button-prev{
        display: block;
        transition: .2s all;
    }
</style>

